<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 16px; font-weight: bold;">短信开关管理</span>
      </div>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" style="text-align: center; min-height: 200px; display: flex; flex-direction: column; justify-content: center;">
            <div style="margin-bottom: 20px;">
              <i :class="smsStatus ? 'el-icon-message' : 'el-icon-message-solid'"
                 :style="{ fontSize: '48px', color: smsStatus ? '#67C23A' : '#F56C6C' }"></i>
            </div>
            <h3 style="margin: 10px 0;">短信服务状态</h3>
            <p style="color: #606266; margin: 10px 0;">
              当前状态：{{ smsStatus ? '开启' : '关闭' }}
            </p>
            <el-switch
              v-model="smsStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="关闭"
              :loading="loading"
              @change="handleStatusChange"
              style="margin-top: 15px;">
            </el-switch>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="never" style="min-height: 200px;">
            <h4 style="margin-top: 0;">操作说明</h4>
            <ul style="line-height: 1.8; color: #606266;">
              <li>开启状态下，系统将正常发送短信通知</li>
              <li>关闭状态下，系统将暂停所有短信发送功能</li>
              <li>切换状态后立即生效，无需重启服务</li>
              <li>建议在维护期间临时关闭短信服务</li>
            </ul>
          </el-card>
        </el-col>
      </el-row>

      </el-card>
  </div>
</template>

<script>
import { updateSmsStatus, getSmsStatus } from '@/api/system/sms'

export default {
  name: 'SmsManagement',
  data() {
    return {
      // 短信开关状态
      smsStatus: false,
      // 加载状态
      loading: false
    }
  },
  created() {
    this.getCurrentStatus()
  },
  methods: {
    /** 获取当前短信开关状态 */
    getCurrentStatus() {
      this.loading = true
      getSmsStatus().then(response => {
        // 后端返回的是smsClose字段：true表示关闭，false表示开启
        // 页面显示的是smsStatus：true表示开启，false表示关闭
        // 所以需要取反转换
        this.smsStatus = response.data === 'false'
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /** 处理开关状态变化 */
    handleStatusChange(value) {
      this.$confirm(`确认要${value ? '开启' : '关闭'}短信服务吗？`, '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateStatus(value)
      }).catch(action => {
        if (action === 'cancel') {
          // 用户取消操作，恢复开关状态
          this.smsStatus = !value
        }
      })
    },

    /** 更新短信开关状态 */
    updateStatus(status) {
      this.loading = true
      // smsClose参数：false表示开启短信，true表示关闭短信
      updateSmsStatus({ smsClose: !status }).then(response => {
        this.$message({
          type: 'success',
          message: `短信服务已${status ? '开启' : '关闭'}`
        })
        // 更新成功后重新获取状态
        this.getCurrentStatus()
      }).catch(() => {
        this.loading = false
        // 发生错误时恢复原状态
        this.smsStatus = !status
      })
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>